<template>
    <div class="amap-page-container map-zoom"  :style="{height: mapHeights}">
        <el-amap
                :vid="'sites' + randomNum"
                :zoom="zoom"
                :center="center"
                :mapStyle="mapStyle"
                class="amap-demo">
            <template v-for="(marker, index) in markers">
                <el-amap-marker
                        :position="marker.position"
                        :events="marker.events"
                        :visible="marker.visible"
                        :draggable="marker.draggable"
                        :vid="index">
                    <img src="../../assets/img/jiebodiadddddn@3x.png" alt="" class="marker-img">
                    <span class="marker-name">{{marker.name}}</span>
                </el-amap-marker>
            </template>
        </el-amap>
        <div class="drawEnclosure" v-if="showButton">
            <div class="button-group">
                <input type="button" class="btn btn_primary" value="全屏" @click="fullScreen"/>&nbsp;
                <input type="button" class="btn btn_primary" value="还原地图" @click="narrowScreen"/>&nbsp;
            </div>
        </div>
        <div class="select-style">
            <el-select v-model="mapStyle" placeholder="请选择主题" style="width: 100px;">
                <el-option
                        v-for="item in themeData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .amap-page-container {
        height: 400px;
        position: relative;
        padding-bottom: 0px;
        .select-style {
            position: absolute;
            top: 10px;
            left: 10px;
        }
        .marker-img{
            width: 20px;
            height: 20px;
            position: relative;
        }
        .marker-name{
            position: absolute;
            border: 1px solid #009688;
            color:rgba(0,0,0,0.8);
            font-size: 12px;
            border-radius: 4px;
            padding: 0 2px;
            white-space: nowrap;
            background-color: #fff;
            left: 20px;
            top: 10px;
        }
    }
</style>

<script>
    import VueAMap from "vue-amap";
    let amapManager = new VueAMap.AMapManager();
    export default {
        name: 'map-site',
        props: {
            polygonObj: {
                type: Array,
                default: () => {
                    return []
                }
            },
            showButton: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                mapHeights: '',
                mapStyle: 'amap://styles/whitesmoke',
                themeData: [
                    {
                        label: '标准',
                        value: 'amap://styles/normal'
                    },
                    {
                        label: '远山黛',
                        value: 'amap://styles/whitesmoke'
                    },
                    {
                        label: '幻影黑',
                        value: 'amap://styles/dark'
                    },
                    {
                        label: '月光银',
                        value: 'amap://styles/light'
                    },
                    {
                        label: '草色青',
                        value: 'amap://styles/fresh'
                    },
                    {
                        label: '雅士灰',
                        value: 'amap://styles/grey'
                    },
                    {
                        label: '涂鸦',
                        value: 'amap://styles/graffiti'
                    },
                    {
                        label: '马卡龙',
                        value: 'amap://styles/macaron'
                    },
                    {
                        label: '靛青蓝',
                        value: 'amap://styles/blue'
                    },
                    {
                        label: '极夜蓝',
                        value: 'amap://styles/darkblue'
                    },
                    {
                        label: '酱籽',
                        value: 'amap://styles/wine'
                    }
                ],
                randomNum: Math.floor(Math.random() * 1000000000000000 + 1),
                amapManager: amapManager,
                zoom: 11,
                center: [104.0707397461,30.5764500266],
                plugin: [{
                    pName: 'ToolBar',
                    events: {
                        init(instance) {
                            console.log(instance);
                        }
                    }
                }],
                markers:[
                    // {
                    //     position:[30.5764500266,104.0707397461],
                    //     events: {
                    //         click: () => {
                    //             alert('click marker');
                    //         }
                    //     },
                    //     visible: true,
                    //     draggable: false
                    // }
                ]
            }
        },
        watch: {
            polygonObj:{
                handler() {
                    this.initSite();
                },
                deep: true

            }
        },
        mounted() {
            this.center = JSON.parse(localStorage.getItem('lnglat'));
            // this.center = this.$store.state.mapCenter;
        },
        methods: {
            fullScreen() {
                this.mapHeights = '86vh';
            }, // 全屏
            narrowScreen() {
                this.mapHeights = '400px';
            }, // 还原地图
            initSite() {
                const self = this;
                self.markers = [];
                for (let key in self.polygonObj) {
                    self.markers.push({
                        position:[self.polygonObj[key].lon,self.polygonObj[key].lat],
                        events: {
                            click: () => {
                                self.$router.push('/dialog/show/express.spot/' + self.polygonObj[key].id);
                            }
                        },
                        name: self.polygonObj[key].name,
                        visible: true,
                        draggable: false
                    });
                }
                // self.center = self.markers[0].position;
            }
        }
    };
</script>
